<template>
    <div>
        <yh-dialog
            drag
            :title="'范围配置' + resolveKey + '类型动态参数设置'"
            :visible.sync="showModal"
            :show-close="false"
            width="400px"
            append-to-body
            :close-on-click-modal="false"
        >
            <div className="risk-table">
                <!-- <span v-for="(item, index) in handleMyRender()" :key="index" v-html="item"></span> -->
                <span v-html="renderContent"></span>
                <!-- {this.handleMyRender(this.state.renderDateSource, this.state.jsonData)} -->
                <div v-for="(item, i) in state.renderDateSource" :key="i">
                    <div v-if="item.webShowType == '1' || item.webShowType === '5'">
                        <div style="font-weight: 700; font-size: 16px" :key="'p' + i">{{ '参数' + (i + 1) }}:</div>
                        <div :key="'a' + i">
                            {{ state.renderDateSource[i].boundExtendName }}:
                            <el-select size="mini" v-model="state.jsonData['C:' + state.renderDateSource[i].boundField]">
                                <el-option
                                    v-for="(item1, index) in state.boundConfigExtends.filter(
                                        item => item.boundField === state.renderDateSource[i].boundField
                                    ).length > 0
                                        ? state.boundConfigExtends.filter(item => item.boundField === state.renderDateSource[i].boundField)[0]
                                              .webDirections
                                        : []"
                                    :key="index"
                                    :label="item1 + ' ' + CompareDirection[item1]"
                                    :value="item1"
                                >
                                </el-option>
                            </el-select>
                            <el-input-number
                                v-model="state.jsonData[state.renderDateSource[i].boundField]"
                                controls-position="right"
                                :precision="0"
                                :min="0"
                                :max="10000000000000"
                                size="mini"
                                style="margin: 5px 0"
                            ></el-input-number>
                        </div>
                    </div>
                    <div v-if="item.webShowType == '2'"></div>
                    <div v-if="item.webShowType == '3'"></div>
                    <div v-if="item.webShowType == '4'">
                        <div style="font-weight: 700; font-size: 16px" :key="'p' + i">{{ '参数' + (i + 1) }}:</div>
                        <div :key="'a' + i">
                            {{ state.renderDateSource[i].boundExtendName }}:
                            <el-select size="mini" v-model="state.jsonData['C:' + state.renderDateSource[i].boundField]">
                                <el-option
                                    v-for="(item1, index) in state.boundConfigExtends.filter(
                                        item => item.boundField === state.renderDateSource[i].boundField
                                    ).length > 0
                                        ? state.boundConfigExtends.filter(item => item.boundField === state.renderDateSource[i].boundField)[0]
                                              .webDirections
                                        : []"
                                    :key="index"
                                    :label="item1 + ' ' + CompareDirection[item1]"
                                    :value="item1"
                                >
                                </el-option>
                            </el-select>
                            <el-select
                                v-model="state.jsonData[state.renderDateSource[i].boundField]"
                                :key="renderValueType"
                                size="mini"
                                style="margin: 5px 0"
                            >
                                <el-option
                                    v-for="(item, index) in state.selectWebSqlValues[state.renderDateSource[i].boundField]
                                        ? state.selectWebSqlValues[state.renderDateSource[i].boundField]
                                        : []"
                                    :key="index"
                                    :value="item.dictKey"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>

                    <div v-if="item.webShowType == '0'">
                        <div style="font-weight: 700; font-size: 16px" :key="'p' + i">{{ '参数' + (i + 1) }}:</div>
                        <div :key="'a' + i">
                            {{ state.renderDateSource[i].boundExtendName }}:
                            <el-select
                                size="mini"
                                v-model="state.jsonData['C:' + state.renderDateSource[i].boundField]"
                                name="type0Value1"
                                id="type0"
                            >
                                <el-option
                                    v-for="(item1, index) in state.boundConfigExtends.filter(
                                        item => item.boundField === state.renderDateSource[i].boundField
                                    ).length > 0
                                        ? state.boundConfigExtends.filter(item => item.boundField === state.renderDateSource[i].boundField)[0]
                                              .webDirections
                                        : []"
                                    :key="index"
                                    :label="item1 + ' ' + CompareDirection[item1]"
                                    :value="item1"
                                    :name="'selections' + item1"
                                >
                                </el-option>
                            </el-select>
                            <el-select
                                v-model="state.jsonData[state.renderDateSource[i].boundField]"
                                :key="renderValueType"
                                collapse-tags
                                multiple
                                size="mini"
                                style="margin: 5px 0"
                                id="typeValue0"
                            >
                                <el-option
                                    v-for="(item, index) in state.selectWebSqlValues[state.renderDateSource[i].boundField]
                                        ? state.selectWebSqlValues[state.renderDateSource[i].boundField]
                                        : []"
                                    :key="index"
                                    :value="item.dictKey"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                    :name="item.dictKey + ' ' + item.dictKeyName"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button name="boundExtendCancel" @click="handelBtnClick('cancel')">取消</el-button>
                <el-button name="boundExtendConfirm" type="primary" @click="handelBtnClick('confirm')">确定</el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import DictionConstUtil from '@/utils/diction-const-util';
import { UUID } from '@/utils/tools';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'ItemBoundExtendModel',
    components: {},
})
export default class ItemBoundExtendModel extends Vue {
    @Prop() showModal;
    @Prop() record;
    @Prop() selectWebSqlValues;
    @Prop() boundConfigExtends;
    @Prop() resolveKey;
    state = {
        showModal: false,
        renderDateSource: [], // 配置设置信息
        record: {}, // 范围配置信息
        jsonData: {}, // 范围配置信息的 boundExtend 字段
        dynamicOriginalBoundConfigPO: {
            // 证券范围配置项
            boundCode: '-1',
            boundValues: [],
            boundValues2: [],
            compareType: '',
            compareType2: '',
            boundValueNames: [],
            boundGroupValid: false,
            parentId: 0,
            configId: 0,
            separateValid: false, // 是否同申报
            sqlSpliceType: '0', // sql拼接符
            groupType: '', // 范围配置组控制类型

            webSqlType: '', // 辅助字段 拼接符
            webBoundName: '', // 辅助字段 证券范围名称
            webCompareType: '', // 辅助字段 比较方向名称
            webBoundvalue: '', // 辅助字段 范围选择值
            boundExtend: '',
            showBoundExtend: false,
        },
        selectWebSqlValues: [], // 下拉列表可选值
        boundConfigExtends: [],
        tableTransferUUID: '',
        renderValueType: '-1',
    };
    // private itemObj = [
    //     {
    //         id: '1',
    //         name: 'xiaozhang',
    //     },
    //     {
    //         id: '2',
    //         name: 'xiaotao',
    //     },
    //     {
    //         id: '3',
    //         name: 'xiaotan',
    //     },
    //     {
    //         id: '3',
    //         name: 'xiaoli',
    //     },
    // ];
    private CompareDirection: any = {};
    private boundField: string = '';
    private hasConfig: boolean; // 是否配置了额外参数

    async mounted() {
        this.CompareDirection = DictionConstUtil.CompareDirection;
        if (this.showModal) {
            this.state.dynamicOriginalBoundConfigPO = this.record || {};
            this.state.selectWebSqlValues = this.selectWebSqlValues || [];
            this.state.boundConfigExtends = this.boundConfigExtends || [];

            this.getEntryBoundConfigExtend(this.record.boundCode);
            if (this.record.boundExtend === undefined) {
                this.state.jsonData = {};
            } else {
                this.state.jsonData = JSON.parse(this.record.boundExtend);
            }
            this.hasConfig = !this.record.hasNoConfig;

            this.state.tableTransferUUID = UUID();
            this.state.renderValueType = UUID();
            // this.state.jsonData['C:' + res[i].boundField][0]?
        }
        // this.handleMyRender();
    }

    /**
     * 获取范围5配置下的动态配置
     */
    private getEntryBoundConfigExtend(boundCode) {
        console.log('boundCode', boundCode);
        if (!boundCode) {
            return;
        }
        this.$axios.get('/original/bound/dynamic/param/' + boundCode).then((res: any) => {
            if (res.length === 0) {
                this.yh_message_error('范围配置' + this.resolveKey + '的动态参数信息为空，请检查');
                return;
            }
            this.state.renderDateSource = res || [];
            if (this.state.renderDateSource.length && this.state.renderDateSource[0].webShowType == '4') {
                // 单选框回显
                if (this.state.jsonData[this.state.renderDateSource[0].boundField]) {
                    this.state.jsonData[this.state.renderDateSource[0].boundField] = String(
                        this.state.jsonData[this.state.renderDateSource[0].boundField]
                    );
                }
            }
        });
    }

    /**
     * 回调事件
     */
    private handelBtnClick(action: string): void {
        if (action === 'confirm') {
            for (let i in this.state.jsonData) {
                if (!this.state.jsonData[i]) {
                    this.yh_message_warn('请填写动态参数!');
                    return;
                }
            }
            if (this.state.renderDateSource.length && this.state.renderDateSource[0].webShowType == '4') {
                // 单选框也传数组
                this.state.jsonData[this.state.renderDateSource[0].boundField] = [this.state.jsonData[this.state.renderDateSource[0].boundField]];
            }
            this.$emit('handleBoundExtendModel', {
                action: action,
                configId: this.record.configId,
                value: JSON.stringify(this.state.jsonData),
            });
        } else if (action === 'cancel') {
            // if (this.resolveKey === '6' && !this.hasConfig) {
            //     if (this.state.renderDateSource[0].webShowType == '4') {
            //         // 单选框也传数组
            //         this.state.jsonData[this.state.renderDateSource[0].boundField] = [this.state.jsonData[this.state.renderDateSource[0].boundField]];
            //     }
            //     // 第六类指标禁投方向默认设置为双向
            //     this.$emit('handleBoundExtendModel', {
            //         action: 'confirm',
            //         configId: this.record.configId,
            //         value: JSON.stringify(this.state.jsonData),
            //     });
            // } else {
            //     this.$emit('handleBoundExtendModel', { action: action });
            // }
            this.$emit('handleBoundExtendModel', { action: action });
        }
    }

    /**
     * 设置比较方向
     */
    private handleOriginalBoundConfigCompare(value, field) {
        this.state.jsonData['C:' + field] = value;
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
/deep/ .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
    border-color: #62b4f7;
}
</style>
